<template>
    <div class="article-list" :class="{ 'is-mobile': $isMobile }">
        <div class="article-header">
            <div class="title" v-if="menuInfo && menuInfo.name">{{ menuInfo.name }}</div>
        </div>
        <div class="content">
            <div class="content-left">
                <div class="left-item" v-for="item in menuInfo.children" :class="{
                    'active-item': item.id === activeId || hasChildActive(item),
                    hasChild: item.children && item.children.length > 0,
                }" :key="item.id" @click="handleActiveMenu(item)">
                    <div class="menu-name">
                        {{ item.name }}
                    </div>
                    <div class="item-children" v-if="(item.children && item.children.length > 0 && item.id === activeId) ||
                        hasChildActive(item)
                        ">
                        <div class="children-item" :class="{
                            'active-item': item2.id === activeId,
                        }" v-for="item2 in item.children" :key="item2.id" @click.stop="handleSecondMenu(item2)">
                            {{ item2.name }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="content-right">
                <template v-if="special.includes(selected.name)">
                    <download v-if="selected.name === '下载列表'"></download>
                </template>
                <template v-else>
                    <article-list-detail :activeId="activeId"></article-list-detail>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import articleListDetail from './components/article-list-detail.vue';
import download from './components/download.vue'
export default {
    components: {
        articleListDetail,
        download
    },
    data() {
        return {
            menuInfo: {},
            activeId: "",

            selected: {},

            special: [
                "下载列表"
            ]
        };
    },

    computed: {

    },

    mounted() {
        this.init();
    },

    methods: {

        setActiveId(id) {
            let activeId;
            try {
                activeId = parseInt(id, 10);
            } catch (error) {
            }
            this.activeId = activeId || id;
        },
        async init() {
            this.setActiveId(this.$route.query.id)
            await this.getMenuInfo();
        },

        async getMenuInfo() {
            const loading = this.$loading();
            const { data } = await this.$fetch.get(`/api/directory/list`);
            loading.close();
            let $index = -1;
            data && data.forEach((item, index) => {
                const selected = item.children.find((item2) => item2.id == this.activeId);
                if (selected) {
                    $index = index;
                    this.handleActiveMenu(selected);
                }
            });
            if ($index !== -1) {
                this.menuInfo = data[$index];
                this.menuInfo.children = this.menuInfo.children.filter((item) => item.status);

            }
        },

        handleActiveMenu(item) {

            if (item.children && item.children.length) {
                this.setActiveId(item.children[0].id)
            } else {
                this.setActiveId(item.id)
            }

            this.selected = item;
        },

        handleSecondMenu(item) {
            this.setActiveId(item.id)
        },

        hasChildActive(item) {
            return item.children && item.children.some((item2) => item2.id === this.activeId);
        },

        isNumber(val) {
            return typeof val === 'number';
        }
    },

    watch: {
        '$route.query.id': {
            handler(val, oldVal) {
                if (val !== oldVal) {
                    this.init(val)
                }
            }
        }
    }
};
</script>

<style lang="less" scoped>
.article-list {
    background: #fff;
    height: calc(100vh - 280px);

}

.article-header {
    border-bottom: 1px solid #efefef;
    width: 100%;

    .title {
        padding-left: 30px;
        height: 58px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 22px;
        color: #333333;
        text-align: left;
        font-style: normal;
        align-items: center;
        width: 250px;
        display: flex;
        user-select: none;
    }
}

.content {
    display: flex;
    flex-direction: row;
    width: 100%;

    .content-left {
        width: 220px;
        border-right: 1px solid #efefef;

        .left-item {
            width: calc(100% - 11px);
            box-sizing: border-box;
            line-height: 22px;
            padding: 14px 20px;
            margin-left: 10px;
            border-bottom: 1px solid #efefef;
            align-items: center;
            display: flex;
            cursor: pointer;
            flex-direction: column;
            border-right: 5px solid transparent;

            .menu-name {
                width: 100%;
            }

            &.hasChild {
                .menu-name {
                    width: calc(100% - 30px);
                }
            }

            &:hover {
                color: #3560ab;
                background: #f2f7ff;
            }

            &.active-item {
                border-right: 5px solid #3560ab;

                &.hasChild {
                    &::before {
                        background: url("./assets/active-arrow.png") center center no-repeat;
                    }
                }

                .item-children {
                    background: #f2f7ff;
                }
            }

            &.hasChild {
                position: relative;

                &::before {
                    content: "";
                    position: absolute;
                    right: 10px;
                    top: 26px;
                    width: 20px;
                    height: 11px;
                    background: url("./assets/arrow.png") center center no-repeat;
                }
            }
        }

        .item-children {
            padding: 6px;

            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;

            .children-item {
                background: #ffffff;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 20px;
                text-align: center;
                font-style: normal;
                margin-bottom: 10px;
                margin-right: 4px;
                padding: 2px;
                text-align: center;
                width: calc(50% - 4px);
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;

                &.active-item {
                    color: #3560ab;
                }
            }
        }
    }

    .content-right {
        flex: 1;
        overflow: hidden;
        margin-left: 60px;
        margin-right: 30px;
    }

}

.article-list.is-mobile {

    min-height: calc(100vh - 280px);

    height: max-content;

    .article-header {
        .title {
            height: 40px;
            font-size: 18px;
        }

        margin-bottom: 8px;
    }

    .content {
        display: flex;
        flex-direction: column;
        padding: 0 10px;

        .content-left {
            width: 100%;
            display: flex;
            flex-wrap: wrap;


            .left-item {
                width: fit-content;
                padding: 4px;
                margin-right: 4px;
                border: 1px solid #efefef;
                margin-top: 4px;
                white-space: nowrap;

                .menu-name {
                    font-size: 14px;
                    line-height: 20px;
                }

                &.active-item {
                    color: #3560ab;
                    border-right: 0;

                }
                .item-children {
                    .children-item {
                        width: fit-content;
                        font-size: 14px;
                    }
                }

                &.hasChild {
                    padding-right: 30px;
                    &::before {
                        right: 2px;
                        top: 4px;
                        width: 12px;
                        height: 12px;
                    
                    }
                   
                }
            }
        }


    }

    .content-right {
        margin: 0;
        padding: 0;
        margin-top: 10px;

        /deep/ .content-item {
            font-size: 14px;
            word-break: break-all;
            border-bottom: none;
            overflow: auto;
            white-space: wrap;
            border-bottom: 1px solid #efefef;
            padding: 4px 0;

            .title {
                line-height: 20px;
                white-space: break-spaces;
                color: #3560ab;


            }
        }

        /deep/ .pagination {
            margin: 10px 0;

            .el-pagination {
                white-space: wrap;
                display: flex;
                flex-direction: row;


                .btn-prev,
                .btn-next {
                    .el-icon  {
                        font-size: 16px;
                    }
                    margin: 0;
                    margin-right: 4px;
                    min-width: 0;
                    height: fit-content;
                    line-height: 16px;
                    font-size: 12px;
                    margin-top: 1.5px;
                }

                .el-pager {
                    .more::before {
                        line-height: 0;
                    }

                    li {
                        padding: 1px 4.5px;
                        margin: 0;
                        margin-right: 4px;
                        min-width: 0;
                        height: fit-content;
                        line-height: normal;
                        font-size: 12px;
                    }
                }

                .el-pagination__jump {
                    display: none;
                }
            }


        }
    }
}
</style>
